<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>

    <style>
        .register {
            width: 400px;
            margin: auto;
        }

        h4 {
            width: 80px;
            margin: auto;
        }

        table {
            margin: auto;
        }

        .cell {
            text-align: right;
        }

        .btn {
            margin-left: 80px;
        }
    </style>
</head>

<body>
    <div class="register">
        <h4>用户注册</h4>
        <form action="#" method="get">
            <fieldset>
                <legend>身份验证-必填信息</legend>
                <table>
                    <tr>
                        <td class="cell">用户名</td>
                        <td><input type="text" name="username"></td>
                    </tr>
                    <tr>
                        <td class="cell">密 码</td>
                        <td><input type="password" name="password"></td>
                    </tr>
                    <tr>
                        <td class="cell">密码确认</td>
                        <td><input type="password" name="repassword"></td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>身份信息-选填信息</legend>
                <table>
                    <tr>
                        <td class="cell">所在城市</td>
                        <td><input type="text" name="city"></td>
                    </tr>
                    <tr>
                        <td class="cell">工作单位</td>
                        <td><input type="text" name="workpalce"></td>
                    </tr>
                    <tr>
                        <td class="cell">家庭住址</td>
                        <td><input type="text" name="address"></td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>其他个人信息</legend>
                <table>
                    <tr>
                        <td class="cell">性别</td>
                        <td>
                            <select name="sex">
                                <option value="man">男</option>
                                <option value="women">女</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell">爱好</td>
                        <td>
                            <input type="checkbox" name="hobby" value="music">音乐
                            <input type="checkbox" name="hobby" value="sport">体育
                            <input type="checkbox" name="hobby" value="computer" checked="checked">计算机
                        </td>
                    </tr>
                    <tr>
                        <td class="cell">喜欢的公司</td>
                        <td>
                            <input type="radio" name="company" value="baidu">百度
                            <input type="radio" name="company" value="microsoft">微软中国
                            <input type="radio" name="company" value="google">谷歌中国

                        </td>
                    </tr>
                    <tr>
                        <td class="cell">个人简介</td>
                        <td><textarea name="profile"></textarea></td>
                    </tr>
                </table>
            </fieldset>
            <input class="btn" type="submit" value="提交您的资料">
            <input type="reset" value="重新填写资料"><br>
            <input class="btn" type="button" value="无效按钮" disabled="disabled">
        </form>
    </div>
</body>

</html>